<template>
	<ynet-field>
		<ynet-input-item
			ref="input6"
			title="清空按钮"
			placeholder="normal text"
			clearable
		></ynet-input-item>
		<ynet-input-item
			ref="input7"
			title="金融键盘"
			placeholder="financial number keyboard"
			is-virtual-keyboard
			clearable
			@focus="onFakeInputFocus"
			@blur="onFakeInputBlur"
		></ynet-input-item>
		<ynet-input-item
			ref="input8"
			title="自定义键盘"
			placeholder="custom number keyboard"
			is-virtual-keyboard
			clearable
			virtual-keyboard-vm="myNumberKeyBoard"
		></ynet-input-item>
		<ynet-number-keyboard type="simple" ref="myNumberKeyBoard"></ynet-number-keyboard>
		<ynet-input-item
			ref="input9"
			placeholder="left/right slots"
			clearable
		>
			<ynet-icon name="bank-zs" slot="left" svg></ynet-icon>
			<ynet-icon name="info" slot="right" @click.native="onClick"></ynet-icon>
		</ynet-input-item>
	</ynet-field>
</template>
<script>
	import { Field, InputItem, NumberKeyboard, Icon } from 'ynet-mobile'
	import '@/assets/svg/bank-zs.svg?icon'
	export default {
		title: '表单控件',
		name: 'input-item-demo',
		components: {
			[Field.name]: Field,
			[InputItem.name]: InputItem,
			[NumberKeyboard.name]: NumberKeyboard,
			[Icon.name]: Icon
		},
		methods: {
			onClick(){
				console.log(`info clicked`)
			},
			onFakeInputFocus(){

			},
			onFakeInputBlur(){
				 this.scrollInputBack && this.scrollInputBack()
			}
		}
	}
</script>